﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dypages.aspx.cs" Inherits="SampleSite.dypages" %>
<style type="text/css">
    .tb_grid { text-align:left;border:0px solid #0094ff;border-collapse: collapse; width:100%; }
    .tb_grid td{ border-bottom:1px solid #95B8E7; }
    .tb_grid tr{ height:30px; }
    .td_lbl{ width:10%; background:#6caef5; text-align:center;}
    .td_cnt{ width:35%; text-align:left; background:#E0ECFF;}
</style>

<div>
    <table id="tables"></table>
</div>

<div id="dlgAddTable" class="easyui-dialog" style="width:320px;height:290px;padding:10px 20px"
		closed="true" resizable="true" modal="true" buttons="#dlg-buttons" align="center">
    <form id="AddTable" method="post">
        <table>
            <tr>
                <th colspan="2" >创建表</th>
            </tr>              
            <tr>
                <td><label for="KeyInAddTable">KEY：</label></td>
                <td><input class="easyui-validatebox" type="text" id="KeyInAddTable" name="Key" 
                            style="width:175px;"
                            data-options="required:true" />
                    <br />
                    <span style="color:red;">关键字，必须为英文字符，不能重复</span>
                </td>
            </tr>
            <tr>
                <td><label for="TemplateInAddTable">模板：</label></td>
                <td>
                    <select name="Template">
                        <option value="default">
                            默认
                        </option>
                    </select>
                </td>
            </tr>
            <tr>
                <td><label for="DescriptionInAddTable">简介：</label></td>
                <td><textarea class="easyui-validatebox" id="DescriptionInAddTable" name="Description" 
                            style="width:175px;"></textarea>
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align:center; padding-top:10px">
                    <a href="javascript:void(0)" 
                        class="easyui-linkbutton do" 
                        id="btnAddTable" 
                        iconcls="icon-ok" >确定</a>
                    <a href="javascript:void(0)" 
                        class="easyui-linkbutton close_dlg"
                        dlg="dlgAddTable"
                        iconcls="icon-cancel">关闭</a>
                </td>
            </tr>
        </table>
    </form>
</div>

<div id="dlgAddColumn" class="easyui-dialog" style="width:600px;height:480px;padding:0px"
		closed="true" resizable="true" modal="true" buttons="#dlg-buttons" align="center">
    <form action="/admin/ajax/table/addColumn.ashx" method="post">
    <table id="tblAddColumn" class="tb_grid" >
        <tr style="height:20px;"><td colspan="4">&nbsp;</td></tr>
        <tr>
            <td class="td_lbl">KEY:</td>
            <td class="td_cnt">
                <input id="Key_AddColumn"
                       class="easyui-validatebox" type="text" name="Key" 
                       style="width:175px;"
                       data-options="required:true,validType:'english'" />
            </td>
            <td class="td_lbl">名称:</td>
            <td class="td_cnt">
                <input id="Name_AddColumn"
                       class="easyui-validatebox" type="text" name="Name" 
                       style="width:175px;"
                       data-options="required:true,validType:'chinese'" />
            </td>
        </tr>
        <tr>
            <td class="td_lbl">字段类型:</td>
            <td class="td_cnt">
                <select id="cboType_AddColumn" name="Type"></select>
            </td>
            <td class="td_lbl">控件类型:</td>
            <td class="td_cnt">
                <select id="cboControl_AddColumn" name="Control"></select>
            </td>
        </tr>
        <tr id="append_flag">
            <td class="td_lbl">选项:</td>
            <td class="td_cnt" colspan="3">
                <input name="Options" type="checkbox" value="required" />必填
                <input name="Options" type="checkbox" checked="checked" value="edit" />可修改
            </td>
        </tr>
        <tr id="showWhenId_1" class="other">
            <td class="td_lbl">小数位数:</td>
            <td class="td_cnt">
                <input name="Precision"
                       class="easyui-numberbox" type="text"
                       style="width:30px;" 
                       data-options="min:0,max:4,required:true,onChange:function(n,o){ $('#MinNumber_AddColumn').numberbox('options').precision = n; $('#MaxNumber_AddColumn').numberbox('options').precision = n; }"
                       value="0"/>
            </td>
            <td class="td_lbl">数值范围:</td>
            <td class="td_cnt">
                <input id="MinNumber_AddColumn" 
                       name="MinNumber"
                       class="easyui-numberbox" type="text"
                       style="width:30px;" value=""/>~
                <input id="MaxNumber_AddColumn" 
                       name="MaxNumber"
                       class="easyui-numberbox" type="text"
                       style="width:30px;" value=""/>
            </td>
        </tr>
        <tr id="showWhenId_2" class="other">
            <td class="td_lbl">文本长度:</td>
            <td class="td_cnt" colspan="3">
                <input name="MinLength"
                       class="easyui-numberbox" type="text"
                       style="width:35px;" 
                       data-options="min:0,max:4000,required:true"
                       value="0"/>~
                <input name="MaxLength"
                       class="easyui-numberbox" type="text"
                       style="width:35px;" 
                       data-options="min:0,max:4000,required:true"
                       value="250"/>
            </td>
        </tr>

        <tr>
            <td colspan="4" style="text-align:center; padding-top:10px">
                <a href="javascript:void(0)" 
                    class="easyui-linkbutton do" 
                    id="btnAddColumn" 
                    iconcls="icon-ok" >确定</a>
                <a href="javascript:void(0)" 
                    class="easyui-linkbutton close_dlg"
                    dlg="btnAddColumn"
                    iconcls="icon-cancel">关闭</a>
            </td>
        </tr>
    </table>
        <input id="TableId_AddColumn" name="TableId" type="hidden" />
    </form>
</div>


<%-- JavaScript --%>
<script type="text/javascript" src="/scripts/DialogHelper.js"></script>

<%-- 创建表 --%>
<script type="text/javascript">
    var dlgAddTable = new _dialog('#dlgAddTable', '创建表');
    dlgAddTable.beforeDo = function () {
        var validate = $('#AddTable').form('validate');
        if (validate == false) {
            return false;
        }

        $.post('/admin/ajax/table/add.ashx',
            $('#AddTable').serialize(),
            function (data) {
                if (data.state == 'ok') {
                    $.messager.alert('提示', '添加成功');

                    $('#dlgAddTable').dialog('close');
                    $('#tables').datagrid('reload');
                }
                else {
                    $.messager.alert('提示', '添加失败' + (data.msg ? ", " + data.msg : ""));
                }
            }, 'json');
    }
    dlgAddTable.beforeShow = function () {
        this.dlg.find('input').val('');
        this.dlg.find('select').val('default');
    }
</script>

<%-- 读取字段信息 --%>
<script type="text/javascript">
    function getTypeText(v, r, i)
    {
        switch (v) {
            case 1:
                return '数值';

            case 2:
                return '文本';

            case 3:
                return '日期';

            case 4:
                return '日期时间';

            case 5:
                return '时间';

            case 6:
                return '数据字典';

            case 7:
                return 'ID类型';
        }

        return '未知类型';
    }

    function getControlText(v, r, i)
    {
        switch (v) {
            case 1:
                return '数值输入控件';

            case 2:
                return '日期控件';

            case 3:
                return '日期时间控件';

            case 4:
                return '时间控件';

            case 5:
                return '单行文本输入控件';

            case 6:
                return '多行文本输入控件';

            case 7:
                return '数据字典单选控件';

            case 8:
                return '人员选择控件';

            case 9:
                return '职位选择控件';

            case 10:
                return '隐藏文本域';
        }

        return '未知控件';
    }

    function loadColumns(i, r) {
        var grid = $('#cols_' + r.id);
        grid.datagrid({
            title: '定义列信息',
            rownumbers: true,
            singleSelect: true,
            idField: 'id',
            remoteSort: false,
            width: 860,
            url: '/admin/ajax/table/columns.ashx?id=' + r.id,

            columns: [[
                { field: 'id', hidden: true },
                { title: 'KEY', field: 'key', width: 60 },
                { title: '名称', field: 'name', width: 60 },
                { title: '类型', field: 'type', width: 60, formatter: getTypeText },
                { title: '必填', field: 'required', width: 60, formatter: function (v, r, i) { return v ? '是' : '否'; } },
                { title: '控件', field: 'control', width: 100, formatter: getControlText },
                { title: '验证规则', field: 'regular', width: 60 },
                { title: '小数位数', field: 'precision', width: 60 },
                { title: '最小长度', field: 'min_length', width: 60 },
                { title: '最大长度', field: 'max_length', width: 60 },
                { title: '最小日期', field: 'min_date', width: 100 },
                { title: '最大日期', field: 'max_date', width: 100 }
            ]],

            toolbar: [{
                id: '_btnAddCol',
                text: '添加',
                iconCls: 'icon-add',
                handler: function () {
                    dlgAddColumn.table_id = r.id;
                    dlgAddColumn.show();
                }
            }, '-', {
                id: '_btnDelCol',
                text: '删除',
                iconCls: 'icon-cancel',
                handler: function () {
                }
            }]
        });

        grid.datagrid('clearSelections');
    }
</script>

<%-- 添加字段 --%>
<script type="text/javascript">
    function dynamicInit(type, control, table) {
        this.cboType = type;
        this.cboControl = control;
        this.table = table;

        this.background_inputs = this.table.find('.other');
        this.background_inputs.detach();
    }

    dynamicInit.prototype.cboType = null;
    dynamicInit.prototype.cboControl = null;
    dynamicInit.prototype.table = null;

    dynamicInit.prototype.types = [
        { id: 1, text: '数值' },
        { id: 2, text: '文本' },
        { id: 3, text: '日期' },
    ];
    dynamicInit.prototype.controls = [
        { id: 1, text: '数值控件' },
        { id: 2, text: '日期控件' },
        { id: 5, text: '单行文本输入控件' },
        { id: 6, text: '多行文本输入控件' },
    ];

    dynamicInit.prototype.type2control = [
        { t_id: 1, c_id: 1 },
        { t_id: 2, c_id: 5 },
        { t_id: 2, c_id: 6 },
        { t_id: 3, c_id: 2 },
    ];

    dynamicInit.prototype.background_inputs = null;

    dynamicInit.prototype.set_option = function (_control, _val) {
        if (_val)
            _control.val(_val);
        else {
            _control.get(0).selectedIndex = 0;
        }
    }

    dynamicInit.prototype.showOther = function () {
        var o = this.table.find('.other')[0];
        if (o) {
            this.background_inputs.push(o);
            $(o).detach();
        }

        var t_id = 'showWhenId_' + this.cboType.val();
        var table = this.table;
        this.background_inputs.each(function (i, n) {
            // append_flag
            if (n.id == t_id) {
                table.find('#append_flag').after($(n));
            }
        });
    }

    dynamicInit.prototype.init_types = function (v) {
        var dynamicObj = this;
        this.cboType.html('');
        this.cboType.unbind('change');
        this.cboType.bind('change', function () {
            dynamicObj.showOther();
            dynamicObj.init_controls(
                    dynamicObj.cboType.val(),
                    null);
        });

        var cnt = '';
        for (var i = 0; i < this.types.length; i++) {
            cnt += '<option value="' + this.types[i].id + '">' + this.types[i].text + '</option>';
        }

        this.cboType.html(cnt);

        this.set_option(this.cboType, v);
        this.showOther();
    }

    dynamicInit.prototype.init_controls = function (t_v, c_v) {
        this.cboControl.html('');
        var c2add = new Array();
        for (var i = 0; i < this.type2control.length; i++) {
            if (this.type2control[i].t_id == t_v) {
                for (var j = 0; j < this.controls.length; j++) {
                    if (this.controls[j].id == this.type2control[i].c_id)
                        c2add.push(this.controls[j]);
                }
            }
        }

        var cnt = '';
        for (var i = 0; i < c2add.length; i++) {
            cnt += '<option value="' + c2add[i].id + '">' + c2add[i].text + '</option>';
        }

        this.cboControl.html(cnt);

        this.set_option(this.cboControl, c_v);
    }

</script>
<script type="text/javascript">
    function checkAddColumn() {
        var type_id = $('#cboType_AddColumn').val();
        var control_id = $('#cboControl_AddColumn').val();
    }

    var dlgAddColumn = new _dialog('#dlgAddColumn', '添加字段');
    dlgAddColumn.beforeShow = function () {
        this.dlg.find('#TableId_AddColumn').val(this.table_id);
        if (this.init)
            return;
        this.init = new dynamicInit(
            $('#cboType_AddColumn'),
            $('#cboControl_AddColumn'),
            $('#tblAddColumn'));
        this.init.init_types(null);
        this.init.init_controls(this.init.cboType.val(), null);
    }
    dlgAddColumn.beforeDo = function () {
        if (this.dlg.find('form').form('validate')) {
            var form = this.dlg.find('form').serialize();
            alert(form);
            var obj = this;
            $.post('/admin/ajax/table/addColumn.ashx',
                    form,
                    function (data) {
                        if (data.state == 'ok') {
                            $.messager.alert('提示', '添加成功');

                            obj.dlg.dialog('close');
                            $('#tables').datagrid('reload');
                        }
                        else {
                            $.messager.alert('提示', '添加失败' + (data.msg ? ", " + data.msg : ""));
                        }
                    }, 'json');
        }
    }
</script>

<%--初始化--%>
<script type="text/javascript">
    var t_id = '#tables';
    var lastExpandRow = -1;

    var tables = $('#tables');

    var doAction = function (action, msg) {
        var row = tables.datagrid('getSelected');
        if (row) {
            action(row);
        }
        else {
            $.messager.alert(msg);
        }
    }

    tables.datagrid({
        idField: 'id',
        rownumbers: true,
        url: '/admin/ajax/table/getall.ashx',
        singleSelect: true,
        view: detailview,
        height: 600,
        onClickRow: function (i, r) {
            $(tables).datagrid('expandRow', i);
        },

        detailFormatter: function (i, r) {
            return '<div style="height:200px; padding:10px;">' +
                   '<table id="cols_' + r.id + '" style="height:200px;"></table>' +
                   '<div>';
        },

        onExpandRow: function (i, r) {
            if (lastExpandRow != -1 && lastExpandRow != i) {
                tables.datagrid('collapseRow', lastExpandRow);
            }

            loadColumns(i, r);
            lastExpandRow = i;
        },

        columns: [[
            { field: 'id', hidden: true },
            { title: 'KEY', field: 'key', width: 180 },
            { title: '模板', field: "template", formatter: function (v, r, i) { switch (v) { case 'default': return '默认'; } } },
            { title: '状态', field: 'state', formatter: function (v, r, i) { if (v == 1) return '已发布'; else return '未发布'; } },
            { title: '简介', field: 'description', width: 250 }
        ]],

        toolbar: [{
            id: '_btnAddTable',
            text: '添加',
            iconCls: 'icon-add',
            handler: function () {
                dlgAddTable.show();
            }
        }, '-', {
            id: '_btnUpdateTable',
            text: '修改',
            iconCls: 'icon-cut',
            handler: function () {
            }
        }, '-', {
            id: '_btnDeleteTable',
            text: '删除',
            iconCls: 'icon-remove',
            handler: function () {
            }
        }, '-', {
            id: '_btnPublish',
            text: '发布',
            iconCls: 'icon-edit',
            handler: function () {
                doAction(function () {
                    var r = tables.datagrid('getSelected');
                    $.post(
                        '/admin/ajax/table/publish.ashx',
                        { id: r.id },
                        function (data) {
                            if (data.state == 'ok') {
                                $.messager.alert('发布成功', '提示');
                                tables.datagrid('reload');
                            }
                            else {
                                $.messager.alert(data.msg, '提示');
                            }
                        }, 'json');
                }, '请选择需要发布的表');
            }
        }]
    });
</script>